<template>
  <div class="list">
    <div class="tab" @click="changePanel(0, $event)">未完成<span :class="{'close-span' : !fold[0].show}"></span></div>
    <div class="box">
      <ul>
        <li v-for="item in getTodo" :key="item.id">
          <input type="checkbox" @click="moveDone(item.id)"/>
          <div>{{item.content}}</div>
          <button class="box-right" @click="moveCancel(item.id)">取消</button>
        </li>
      </ul>
    </div>

    <div class="tab" @click="changePanel(1, $event)">已完成<span :class="{'close-span' : !fold[1].show}"></span></div>
    <div class="box">
      <ul>
        <li v-for="item in getDone" :key="item.id">
          <input type="checkbox" checked="checked" @click="moveTodo(item.id)"/>
          <div>{{item.content}}</div>
          <div class="box-right time">{{item.time}}</div>
        </li>
      </ul>
    </div>

    <div class="tab" @click="changePanel(2, $event)">已取消<span :class="{'close-span' : !fold[2].show}"></span></div>
    <div class="box">
      <ul>
        <li v-for="item in getCancel" :key="item.id">
          <div class="cancel">{{item.content}}</div>
          <button class="box-right" @click="moveTodo(item.id)">恢复</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fold: [
        {show: true},
        {show: true},
        {show: true}
      ]
    }
  },
  computed: {
    getTodo() {
      return this.$store.getters.getTodo;
    },
    getDone() {
      return this.$store.getters.getDone;
    },
    getCancel() {
      return this.$store.getters.getCancel;
    }
  },
  methods: {
    // 移到已完成
    moveDone(id) {
      this.$store.dispatch('movedone', id)
    },
    // 移到未完成
    moveTodo(id) {
      this.$store.dispatch('movetodo', id)
    },
    // 移到已取消
    moveCancel(id) {
      this.$store.dispatch('movecancel', id)
    },
    // 点击后改变面板是否打开状态 自然每次点击show也要取反 这样可以改变箭头方向
    changePanel(num, event) {
      // 找到面板的显示状态
      const show = this.fold[num].show;
      if(show) {
        this.closePanel(event)
      }else {
        this.openPanel(event)
      }
      this.fold[num].show = !show;
    },
    // 关闭面板
    closePanel(event) {
      // event.currentTarget 是当前点击的盒子 div.tab event.currentTarget.nextElementSibling是下一个元素节点 即div.box
      // 通过div.box 找到它的孩子ul更改它的显示状态 或者隐藏它
      let box = event.currentTarget.nextElementSibling,
          ul = box.children[0];
      box.style.height = ul.offsetHeight + 'px';
      setTimeout(function(){
        box.style.height = '0px';
        setTimeout(function(){
          box.style.display = 'none';
        }, 300);
      }, 10);

    },

    // 打开面板
    openPanel(event) {
      let box = event.currentTarget.nextElementSibling,
          ul = box.children[0];
      box.style.display = 'block';
      box.style.height = ul.offsetHeight + 'px';
      setTimeout(function(){
        box.style.height = 'auto';
      }, 300)
      
    }
  }
};
</script>

<style lang="scss" scoped>
// $bg_color: #00d1b2;
.list {
  margin-top: 2em;

  .tab {
    // background-color: $bg_color;
    padding: 0.8em 1em;
    color: #fff;
    border-bottom: solid 1px #fff;
    position: relative;
    cursor: pointer;

    span {
      position: absolute;
      right: 1em;
      top: 0.8em;
      width: 0.8em;
      height: 0.8em;
      border: {
        top: 2px solid #fff;
        right: 2px solid #fff;
      }
      transform: rotate(135deg);
      transition: transform 0.3s;
      // 点击后添加这个类 三角形旋转
      &.close-span {
        transform: rotate(45deg);
      }
    }
  }

  .box {
    overflow: hidden;
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        display: flex;
        align-items: center;
        padding: 0.8em 1em;
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
        input {
          width: 1.2em;
          height: 1.2em;
        }

        div {
          margin-left: 0.8em;
        }

        .cancel {
          text-decoration: line-through;
          color: #aaa;
          margin-left: 2.2em;
        }

        .box-right {
          margin-left: auto;
          font-size: 0.7em;
        }

        button {
          background-color: #fff;
          border: 1px solid #E5EAEF;
          padding: 0.5em 0.8em;
          color: #333;
          border-radius: 0.5em;
        }

        .time {
          color: #aaa;
        }
      }
    }
  }
}
</style>